<div class="fsh-rightPanel">
    <label> <input type="password" style="display: none"></label>
    <div class="layui-anim layui-anim-upbit">
        <div class="layui-form-item wx-search" id="list_form">
            <div class="layui-inline">
                <input type="text" name="nickname" placeholder="请输入用户名称" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn btn-primary" id="search">搜索</button>
            <div class="layui-btn-container" style="text-align: right">
                <button class="layui-btn btn-primary" id="role_add">新建用户</button>
            </div>
        </div>
        <table id="list_table" class="layui-hide" lay-filter="mainList"></table>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </div>
</script>
<script>
    layui.use(['layer', 'table'], function () {
        var layer = layui.layer;
        var table = layui.table;

        var tableObj = table.render({
            elem: '#list_table',
            url: context + '/api/student/getSchool/'+userInfo.school_id,
            //开启头部工具栏，并为其绑定左侧模板，
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {}],
            request: {
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            align: 'center'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {
                    field: 'photo', title: '头像', align: 'center', templet: function (d) {
                        return d.photo != undefined ? '<div><img src="' + d.photo + '" style="height:100px;width:100px;"></img></div>' : '';
                    }
                },
                {field: 'username', title: '账号', align: 'center'},
                {field: 'nickname', title: '姓名', align: 'center', width: 80},
                {
                    field: 'sex', title: '性别', align: 'center', templet: function (d) {
                        return d.sex == 0 ? '男' : '女';
                    }, width: 80
                },
                {field: 'job', title: '职位', align: 'center', width: 80},
                {field: 'email', title: '邮箱', align: 'center'},
                {field: 'createDate', title: '创建时间', align: 'center'},
                {
                    field: 'status', title: '状态', width: 100, align: 'center', templet: function (d) {
                        var s = d.status;
                        if (s == 0) {
                            return '正常';
                        } else if (s == 1) {
                            return '锁定';
                        } else if (s == 2) {
                            return '已解锁';
                        } else {
                            return '永久锁定';
                        }
                    }
                },
                {
                    field: 'lock', title: '操作', width: 240, align: 'center', unresize: true, align: 'center',
                    templet: function (d) {
                        return '<a href="javascript:;" class="font-primary" lay-event="update">修改</a>'
                            + '<a href="javascript:;" class="font-primary" lay-event="del">删除</a>'
                            + '<a href="javascript:;" class="font-primary" lay-event="role">分配角色</a>'
                            + '<a href="javascript:;" class="font-primary" lay-event="status">状态</a>';
                    }
                }
            ]]
            , page: true

        });

        // 检索
        $("#search").click(function () {
            reloadTable(tableObj);
        });
        // 添加
        $("#role_add").click(function () {
            showDialog({
                title: '新建用户'
                , template: 'add'
                , tableObj: tableObj
                , yes: function (index, layero) {
                    layui.form.on('submit(*)', function (data) {
                        $.ajax({
                            url: context + '/api/student/insert',
                            type: 'POST',
                            async: false,
                            dataType: 'json',
                            contentType: "application/json;charset-UTF-8",
                            data: JSON.stringify(data.field),
                            success: function (result) {
                                if (result.success) {
                                    layer.msg("添加成功");
                                    layer.close(index);
                                    reloadTable(tableObj);
                                } else {
                                    layer.msg(result.msg);
                                }
                            },
                            error: function () {
                                layer.msg("添加异常");
                            }
                        })
                    });
                    //表单验证
                    layui.form.validate();//默认form名称为add_form（可不填写）
                }

            })
        });

        //表格内部操作按钮监听
        table.on('tool(mainList)', function (obj) { //注：tool是工具条事件名，mainList是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值

            if (layEvent === 'update') {
                showDialog({
                    title: '编辑用户'
                    , type: 'get'
                    , template: 'edit'
                    , tableObj: tableObj
                    , htmlData: data
                    , yes: function (index, layero) {
                        layui.form.on('submit(*)', function (data) {

                            $.ajax({
                                url: context + '/api/student/update',
                                type: 'PATCH',
                                async: false,
                                dataType: 'json',
                                contentType: "application/json;charset-UTF-8",
                                data: JSON.stringify(data.field),
                                success: function (result) {
                                    if (result.success) {
                                        layer.msg("修改成功");
                                        layer.close(index);
                                        reloadTable(tableObj);
                                    } else {
                                        layer.msg(result.msg);
                                    }
                                },
                                error: function () {
                                    layer.msg("修改异常");
                                }
                            })
                        });

                        //表单验证
                        layui.form.validate();//默认form名称为add_form（可不填写）
                    }

                })
            }
            // 删除
            if (layEvent === 'del') {
                layer.confirm('确认删除此帐号？', {
                    icon: 7,
                    title: "提示",
                    btn: ['确认', '取消'] //按钮
                }, function () {
                    $.ajax({
                        url: context + '/api/student/del/' + data.user_id,
                        type: "DELETE",
                        success: function (result) {
                            if (result.success && result.data > 0) {
                                layer.msg("删除成功");
                                reloadTable(tableObj);
                            } else {
                                layer.msg(result.msg);
                            }
                        },
                        error: function () {
                            layer.msg("删除异常");
                        }
                    })
                }, function () {
                    layer.closeAll();
                });
            }
            // 分配角色
            if (layEvent === 'role') {
                showDialog({
                    title: '分配角色'
                    , template: 'role'
                    , tableObj: tableObj
                    , htmlData: data
                    , yes: function (index, layero) {
                        layui.form.on('submit(*)', function (data) {

                            $.ajax({
                                url: context + '/api/student/updateRole',
                                type: 'PATCH',
                                async: false,
                                dataType: 'json',
                                contentType: "application/json;charset-UTF-8",
                                data: JSON.stringify(data.field),
                                success: function (result) {
                                    if (result.success) {
                                        layer.msg("分配成功");
                                        layer.close(index);
                                        reloadTable(tableObj);
                                    } else {
                                        layer.msg(result.msg);
                                    }
                                },
                                error: function () {
                                    layer.msg("分配异常");
                                }
                            })
                        });

                        //表单验证
                        layui.form.validate();//默认form名称为add_form（可不填写）
                    }

                })
            }
            // 更改状态
            if (layEvent === 'status') {
                showDialog({
                    title: '更改用户状态'
                    , template: 'status'
                    , tableObj: tableObj
                    , htmlData: data
                    , yes: function (index, layero) {
                        layui.form.on('submit(*)', function (data) {
                            var jsonStr = {
                                id: data.field.user_id,
                                status: data.field.status
                            };
                            $.ajax({
                                url: context + '/api/student/updatestatus',
                                type: 'PATCH',
                                async: false,
                                dataType: 'json',
                                contentType: "application/json;charset-UTF-8",
                                data: JSON.stringify(data.field),
                                success: function (result) {
                                    if (result.success) {
                                        layer.msg("分配成功");
                                        layer.close(index);
                                        reloadTable(tableObj);
                                    } else {
                                        layer.msg(result.msg);
                                    }
                                },
                                error: function () {
                                    layer.msg("分配异常");
                                }
                            })
                        });

                        //表单验证
                        layui.form.validate();//默认form名称为add_form（可不填写）
                    }

                })
            }

        });

    });
</script>
<style>
    img.fans-portrait {
        width: 50px;
        height: 50px;
    }

    .fsh-rightPanel .layui-table-body .layui-table-cell {
        height: 50px;
        line-height: 50px;
    }
</style>